<template>
	<div>
		<my-button type="primary" @click="openDialog" icon="Search">高 级</my-button>
		<my-button type="success" @click="emits('queryFn', [])" icon="Refresh">重 置</my-button>

		<!-- 添加、修改对话框 -->
		<el-dialog :title="dialog.title" v-model="dialog.open" width="600px" append-to-body>
			<my-table ref="tabFrom" :data="state.list" :columns="state.columns" height="350">
				<template #key="{ row }">
					<my-select
						:list="queryList"
						:fileType="{ label: 'key', value: 'value' }"
						original
						v-model="row.key"
						@getRow="({ type, dictType, urlLike, fileType }) => (row = Object.assign(row, { type, dictType, urlLike, fileType }))"
						@change="changeValue(row)"
					/>
				</template>
				<template #condition="{ row }">
					<my-select type="GETconditionType" v-model="row.condition" />
				</template>
				<template #value="{ row }">
					<slot :name="row.key" :row="row">
						<my-select v-if="row.type == 4" :type="row.dictType" :api="row.urlLike" :fileType="fileTypeFn(row.fileType)" v-model="row.value" />
						<my-input-number v-else-if="row.type == 3" v-model="row.value"></my-input-number>
						<my-date-picker v-else-if="row.type == 1" v-model="row.value"></my-date-picker>
						<my-input v-else v-model="row.value"></my-input>
					</slot>
				</template>
				<template #default="{ $index }">
					<my-button-text @click="state.list.splice($index, 1)">
						<el-icon>
							<Delete />
						</el-icon>
					</my-button-text>
				</template>
			</my-table>
			<template #footer>
				<slot name="footer" :list="state.list">
					<div class="flex m-between">
						<my-button type="success" icon="Plus" @click="add">添加更多条件</my-button>
						<div>
							<my-button @click="dialog.open = false">取 消</my-button>
							<my-button type="primary" @click="queryFn">查 询</my-button>
						</div>
					</div>
				</slot>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="MySearch">
/***
 * 使用例子
 *  <my-search :show="true"
      searchKey="src/views/property/deviceAccount/card"
      :loadFn="queryCard"
      @queryFn="
         (val) => {
            queryParams.seniorVoList = val;
            refTable.reload();
          }"
    />
 */

/***
 * props
 * @property {Function} loadFn 高级搜索表格的列数据
 * @property {String} searchKey 独一无二的key值，缓存当前用户查询条件
 */
const props = defineProps({
		loadFn: {
			type: Function,
			default: () => {},
			required: true
		},
		searchKey: {
			typee: String,
			required: true
		}
	}),
	emits = defineEmits(['queryFn']),
	queryList = ref([]);

// 弹出层
const dialog = reactive({
		title: '高级查询',
		open: false
	}),
	state = reactive({
		list: [],
		columns: [
			{
				label: '列名',
				prop: 'key'
			},
			{
				label: '条件',
				prop: 'condition'
			},
			{
				label: '查询值',
				prop: 'value'
			},
			{
				label: '操作',
				width: 60
			}
		]
	});

//获取列名下拉
function initList() {
	if (typeof props.loadFn !== 'function') {
		throw new Error('传入的方法必须是Function');
	}
	props.loadFn().then((res) => {
		queryList.value = res.data;
	});
}

/**
 * 数据格式处理
 */
function fileTypeFn(data) {
	if (data) {
		data = data.match(/(\w+)/g); //匹配任意单词字符串,返回组成的数组
		return {
			[data[0]]: data[1],
			[data[2]]: data[3]
		};
	}
	return undefined;
}

/**
 * 将上次选中的值清除
 * @param val
 */
function changeValue(row) {
	row.value = '';
}

//dialog弹窗控制
function openDialog() {
	//初始化添加一项
	state.list = $store.user.GetSearch(props.searchKey) || [{}];
	// 初始化第一列下拉数据
	initList();
	dialog.open = true;
}

//高级查询添加一项
function add() {
	state.list.push({});
}

//查询函数
function queryFn() {
	// 将数据进行过滤
	const List = state.list.map((item) => ({
		...item,
		key: item.key,
		condition: item.condition,
		value: item.value
	}));
	$store.user.SetSearch(props.searchKey, List);
	emits('queryFn', List);
	dialog.open = false;
}
</script>

<style lang="scss" scoped>
:deep() {
	.el-dialog__body {
		padding: var(--el-dialog-padding-primary) !important;
	}
}
</style>
